<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="header-content">
        <text class="header-title">商家登录</text>
      </view>
    </view>

    <!-- Login Form -->
    <view class="login-form">
      <!-- Welcome -->
      <view class="welcome-section">
        <view class="logo-container">
          <text class="logo-icon fas fa-store text-3xl text-white"></text>
        </view>
        <text class="welcome-title">商家服务平台</text>
        <text class="welcome-subtitle">登录后即可申请入驻或管理店铺</text>
      </view>

      <!-- Main One-Click Login -->
      <view class="login-card">
        <view class="phone-info">
          <text class="phone-label">本机号码</text>
          <text class="phone-number">{{ phoneNumber }}</text>
          <text class="platform-login">使用平台账号快速登录</text>
        </view>
        <button class="login-button" @click="oneClickLogin">
          <text class="fas fa-rocket mr-2 text-white"></text>
          <text class="login-button-text">一键登录</text>
        </button>

        <!-- Agreement -->
        <view class="agreement-section">
          <label class="checkbox-container">
            <checkbox :checked="agreeChecked" @change="onAgreeChange" />
            <text class="agreement-text">登录即表示您同意</text>
            <text class="agreement-link" @click="showMerchantAgreement">《商家服务协议》</text>
            <text class="agreement-text">和</text>
            <text class="agreement-link" @click="showPrivacyPolicy">《隐私政策》</text>
          </label>
        </view>
      </view>

      <!-- Divider -->
      <view class="divider">
        <view class="divider-line"></view>
        <text class="divider-text">其他登录方式</text>
        <view class="divider-line"></view>
      </view>

      <!-- Other Login Methods -->
      <view class="other-methods">
        <navigator url="../sms-login/sms-login" class="method-button sms-button">
          <text class="fas fa-comment-dots text-indigo-500 mr-2 group-hover:text-indigo-600"></text>
          <text class="method-text">手机验证码登录</text>
        </navigator>

        <view class="third-party-login">
          <button class="method-button wechat-button" @click="wechatLogin">
            <text class="fab fa-weixin text-xl text-green-600 mr-2"></text>
            <text class="method-text">微信登录</text>
          </button>
          <button class="method-button alipay-button" @click="alipayLogin">
            <text class="fab fa-alipay text-xl text-blue-600 mr-2"></text>
            <text class="method-text">支付宝登录</text>
          </button>
        </view>
      </view>

      <!-- Help -->
      <view class="help-section">
        <text class="help-title">登录遇到问题？</text>
        <view class="help-buttons">
          <button class="help-button" @click="contactSupport">
            <text class="fas fa-headset mr-1 text-indigo-600 hover:text-indigo-800"></text>
            <text class="help-text">联系客服</text>
          </button>
          <button class="help-button" @click="viewHelp">
            <text class="fas fa-question-circle mr-1 text-indigo-600 hover:text-indigo-800"></text>
            <text class="help-text">帮助中心</text>
          </button>
        </view>
      </view>

      <!-- Notice Section -->
      <view class="notice-section">
        <view class="notice-content">
          <text class="notice-icon fas fa-info-circle text-yellow-600 mt-0.5 mr-2"></text>
          <view class="notice-text">
            <text class="notice-title">温馨提示</text>
            <view class="notice-list">
              <text class="notice-item">• 使用您的平台账号即可登录</text>
              <text class="notice-item">• 登录成功后可直接申请商家入驻</text>
              <text class="notice-item">• 一个账号可同时享受购物和开店服务</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- Toast -->
    <view v-if="showToast" class="toast">{{ toastMessage }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '150****1481',
      agreeChecked: true,
      showToast: false,
      toastMessage: ''
    }
  },
  onLoad() {
    // 初始化手机号码
    this.phoneNumber = this.getDevicePhoneNumber()
  },
  methods: {
    // 获取设备手机号码
    getDevicePhoneNumber() {
      const prefixes = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '170', '171', '172', '173', '175', '176', '177', '178', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189']
      const prefix = prefixes[Math.floor(Math.random() * prefixes.length)]
      const suffix = Math.floor(Math.random() * 10000).toString().padStart(4, '0')
      return `${prefix}****${suffix}`
    },
    
    // 同意协议复选框变化
    onAgreeChange(e) {
      this.agreeChecked = e.detail.value
    },
    
    // 一键登录
    oneClickLogin() {
      if (!this.agreeChecked) {
        this.showToastMessage('请先同意商家服务协议和隐私政策')
        return
      }
      
      // 模拟登录过程
      this.showToastMessage('正在登录...')
      
      setTimeout(() => {
        // 设置登录状态
        uni.setStorageSync('userToken', 'merchant-token-' + Date.now())
        uni.setStorageSync('userType', 'merchant')
        uni.setStorageSync('phoneNumber', this.phoneNumber)
        
        this.showToastMessage('登录成功！正在跳转...')
        
        setTimeout(() => {
          // 跳转到首页
          uni.switchTab({
            url: '/pages/home/home'
          })
        }, 1000)
      }, 1500)
    },
    
    // 微信登录
    wechatLogin() {
      if (!this.agreeChecked) {
        this.showToastMessage('请先同意商家服务协议和隐私政策')
        return
      }
      
      this.showToastMessage('正在跳转微信授权...')
      
      setTimeout(() => {
        uni.setStorageSync('userToken', 'merchant-wechat-' + Date.now())
        uni.setStorageSync('userType', 'merchant')
        uni.setStorageSync('loginMethod', 'wechat')
        
        this.showToastMessage('微信授权成功！')
        
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/home/home'
          })
        }, 1000)
      }, 2000)
    },
    
    // 支付宝登录
    alipayLogin() {
      if (!this.agreeChecked) {
        this.showToastMessage('请先同意商家服务协议和隐私政策')
        return
      }
      
      this.showToastMessage('正在跳转支付宝授权...')
      
      setTimeout(() => {
        uni.setStorageSync('userToken', 'merchant-alipay-' + Date.now())
        uni.setStorageSync('userType', 'merchant')
        uni.setStorageSync('loginMethod', 'alipay')
        
        this.showToastMessage('支付宝授权成功！')
        
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/home/home'
          })
        }, 1000)
      }, 2000)
    },
    
    // 显示商家协议
    showMerchantAgreement() {
      uni.showModal({
        title: '商家服务协议',
        content: '1. 商家入驻条件\n2. 平台服务内容\n3. 商家权利义务\n4. 佣金及费用说明\n5. 违规处理规则\n6. 争议解决方式\n\n详细条款请登录后查看...',
        showCancel: false
      })
    },
    
    // 显示隐私政策
    showPrivacyPolicy() {
      uni.showModal({
        title: '隐私政策',
        content: '本平台承诺保护您的隐私信息...\n\n• 信息收集范围\n• 信息使用目的\n• 信息保护措施\n• 信息共享说明',
        showCancel: false
      })
    },
    
    // 联系客服
    contactSupport() {
      uni.showModal({
        title: '商家客服',
        content: '工作时间：9:00-21:00\n商家专线：400-888-1000\n在线客服：即将为您转接商家支持团队...',
        showCancel: false
      })
    },
    
    // 查看帮助
    viewHelp() {
      uni.showModal({
        title: '商家入驻指南',
        content: '• 如何申请入驻\n• 入驻所需材料\n• 审核流程说明\n• 商家权益介绍\n• 佣金费用说明\n\n更多详情请登录后查看...',
        showCancel: false
      })
    },
    
    // 显示提示信息
    showToastMessage(message) {
      this.toastMessage = message
      this.showToast = true
      
      setTimeout(() => {
        this.showToast = false
      }, 3000)
    }
  }
}
</script>

<style>
@import 'https://cdn.tailwindcss.com';
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';

.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.header {
  background: linear-gradient(90deg, #5c6bc0, #7e57c2);
  padding: 30rpx 20rpx;
  position: relative;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  color: white;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
}

.login-form {
  padding: 30rpx;
}

.welcome-section {
  text-align: center;
  margin-bottom: 50rpx;
}

.logo-container {
  width: 140rpx;
  height: 140rpx;
  background: linear-gradient(135deg, #5c6bc0, #7e57c2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30rpx;
}

.logo-icon {
  color: white;
  font-size: 60rpx;
}

.welcome-title {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.welcome-subtitle {
  font-size: 28rpx;
  color: #666;
}

.login-card {
  background: linear-gradient(135deg, #e8eaf6, #f3e5f5);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.phone-info {
  text-align: center;
  margin-bottom: 40rpx;
}

.phone-label {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.phone-number {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.platform-login {
  display: block;
  font-size: 24rpx;
  color: #5c6bc0;
}

.login-button {
  background: linear-gradient(90deg, #5c6bc0, #7e57c2);
  border-radius: 15rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 20rpx rgba(92, 107, 192, 0.3);
}

.login-button-text {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.agreement-section {
  display: flex;
  align-items: flex-start;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.checkbox-container ::v-deep .uni-checkbox-input {
  margin-top: 6rpx;
  margin-right: 15rpx;
  border-radius: 50%;
}

.agreement-text {
  font-size: 24rpx;
  color: #666;
  margin-right: 10rpx;
}

.agreement-link {
  font-size: 24rpx;
  color: #5c6bc0;
  margin-right: 10rpx;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.divider-line {
  flex: 1;
  height: 2rpx;
  background-color: #ddd;
}

.divider-text {
  font-size: 24rpx;
  color: #999;
  margin: 0 20rpx;
}

.other-methods {
  margin-bottom: 50rpx;
}

.method-button {
  width: 100%;
  height: 80rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  border: 2rpx solid #ddd;
  background-color: white;
}

.sms-button {
  background-color: white;
}

.third-party-login {
  display: flex;
  gap: 20rpx;
}

.wechat-button {
  flex: 1;
  background-color: #e8f3e9;
  border-color: #c5e1a5;
  color: #333;
}

.alipay-button {
  flex: 1;
  background-color: #e3f2fd;
  border-color: #bbdefb;
  color: #333;
}

.method-icon {
  margin-right: 15rpx;
  font-size: 36rpx;
}

.wechat-button .method-icon {
  color: #4caf50;
}

.alipay-button .method-icon {
  color: #2196f3;
}

.help-section {
  text-align: center;
  margin-bottom: 40rpx;
}

.help-title {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.help-buttons {
  display: flex;
  justify-content: center;
  gap: 40rpx;
}

.help-button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
}

.help-icon {
  font-size: 28rpx;
  color: #5c6bc0;
  margin-right: 10rpx;
}

.help-text {
  font-size: 24rpx;
  color: #5c6bc0;
}

.notice-section {
  background-color: #fff9e6;
  border: 2rpx solid #ffecb3;
  border-radius: 20rpx;
  padding: 30rpx;
}

.notice-content {
  display: flex;
}

.notice-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
  margin-top: 5rpx;
}

.notice-text {
  flex: 1;
}

.notice-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #e65100;
  margin-bottom: 15rpx;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.notice-item {
  display: block;
  font-size: 24rpx;
  color: #f57c00;
  line-height: 1.4;
}

.toast {
  position: fixed;
  top: 300rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  z-index: 9999;
}
</style>